<template lang="pug">
  .signin.head-page(v-if="isShow", @touchmove="handleDragPrevent")
    HeadBar(title="登录", @closeBar="isShow = false")
    .signin-wrap
      .signin-top
        img(:src="signupBgUrl", alt="登录注册")
        van-tabs(v-model="tabActive")
          //- van-tab(title='注册', disabled)
          van-tab(title='登录')

      .signin-body
        .field
          van-field(
            type="text",
            placeholder="请输入用户名",
            v-model="phone",
            required,
            clearable)
        .field
          van-field(
            type="password",
            placeholder="密码",
            v-model="password",
            required,
            clearable)

        .authorize.tac(@click="authorize", v-if="getWxBrowser")
          p 使用第三方快捷登录
          .link-wrap
            span
              i.iconfont &#xe641;

      .signin-foot.pos-a
        van-button(type="warning", size='large', @click='handleSignIn') 登录

</template>

<script>
import {
  sign,
  isPad,
  isWxBrowser,
  handleDefPrevent
} from '@/utils'
import headBarMixin  from '@/mixins/headBar'
import autoSwitchSceneMixin  from '@/mixins/switch-scene'

export default {
  mixins: [headBarMixin, autoSwitchSceneMixin],
  data() {
    return {
      isShow: false,
      phone: null,
      password: null,
      tabActive: '2'
    }
  },
  created() {
    this.signupBgUrl = `${$globalconfig.URLS.API}krpano/images/signup_bg.jpg`
  },
  mounted() {
    this.$vgo.on('login:show', () => {
      // vr模式下不弹出登录框
      if(!this.isVrMode) {
        const isTTWebView = window.navigator.userAgent.toLowerCase().includes('toutiaomicroapp')
        if (isTTWebView) {
          // 抖音小程序逻辑
          this.isShow = true
        } else if ($globalconfig.MODULES.IS_VIEW_MICRO_SCAN_LOGIN_OPEN) {
          // IS_VIEW_MICRO_SCAN_LOGIN_OPEN是否开启微信扫码登录
          require('@/components/new-comps/scan-login/').default.open()
        } else {
          this.isShow = true
        }
        this.handleClearAutoSwitchScene()
      }
    })
  },
  computed: {
    getWxBrowser() {
      return isWxBrowser() || isPad()
    }
  },
  methods: {
    authorize() {
      const id = this.$store.getters.panoInfo.pano_id
      this.$AUTH.weixinAuth(id)
    },
    handleSignIn() {
      if(!this.phone || !this.password) {
        this.$vgo.tip('手机号或者密码错误', 'error')
        return
      }

      const {
        signature,
        noncestr,
        timestamp
      } =  sign('VgoUser')

      const options = {
        username: this.phone,
        password: this.password,
        signature: signature,
        timestamp: timestamp,
        nonce: noncestr
      }
      this.$store.dispatch('userLogin', options)
      this.isShow = false
      this.handleRestartAutoSwitchScene()
    },
    handleDragPrevent(e) {
      handleDefPrevent(e)
    }
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixin.styl'
$font-color = #606266
$border-color = #DCDFE6
$success = #67C23A
$gray-dark = #D3DCE6
$gray = #E5E9F2
.signin
  z-index: 1001
  .signin-wrap
    full-cover()
    top: 40px
    background-color: #f9f9f9
  .signin-top
    position: relative
    width: 100%
    height: 0
    padding-top: 50%
    img
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%

  .signin-body
    position: relative
    padding-top: 60px

    .field
      width: 100%
      input, input::placeholder
        color: $font-color
      .van-cell
        bdb-1px(#ddd)
    .authorize
      font-size: 14px
      padding-top: 20px
      color: $gray-dark
      .link-wrap
        font-size: 0
        padding: 10px
        span
          display: inline-block
          vertical-align: middle
          width: 40px
          height: 40px
          font-size: 14px
          color: $gray
          border-radius: 50%
          border: 1px solid #fff
          i
            margin-left: 4px
            font-size: 32px
            color: $success
  .signin-foot
    width: 100%
    left: 0
    right: 0
    bottom: 0

</style>
